<script setup lang='ts'>
import NodeTemplate from '../components/NodeTemplate.vue'

const accessType = ref(['CPE', '客户端'])
const typevalue1 = ref('混合')
const fusionnet = ref('是')

const net = ref('云网络')
const template = ref('')
const templateVisible = ref(false)
const cpeNodeList = ref([
  {},
])
const clientNodeList = ref([
  {},
])
const vcpeNodeList = ref([
  {},
])

function addNode(type = 'cpe') {
  console.log('[ type ]-22', type)
  if (type === 'cpe')
    cpeNodeList.value.push({})
  else if (type === 'vcpe')
    vcpeNodeList.value.push({})
  else if (type === 'client')
    clientNodeList.value.push({})
}

function delNode(index: number, type = 'cpe') {
  if (type === 'cpe')
    cpeNodeList.value.splice(index, 1)
  else if (type === 'vcpe')
    vcpeNodeList.value.splice(index, 1)
  else if (type === 'client')
    clientNodeList.value.splice(index, 1)
}
</script>

<template>
  <el-form-item label="互联网段要求">
    <el-input />
  </el-form-item>
  <el-form-item label="类型">
    <el-radio-group v-model="typevalue1">
      <el-radio label="托管型" value="托管型" />
      <el-radio label="运营型" value="运营型" />
      <el-radio label="混合型" value="混合型" />
    </el-radio-group>
  </el-form-item>
  <el-form-item label="融合网络">
    <el-radio-group v-model="fusionnet">
      <el-radio v-for="item in ['否', '是']" :key="item" :label="item">
        {{ item }}
      </el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item v-if="fusionnet === '是'" v-model="net" ml24>
    <el-checkbox-group v-model="accessType">
      <el-checkbox label="云网络" value="云网络" />
      <el-checkbox label="外部网络" value="外部网络" />
    </el-checkbox-group>
  </el-form-item>

  <div class="form-block !border-amber" data-title="客户业务节点">
    <el-form-item label="部署形式">
      <el-checkbox-group v-model="accessType">
        <el-checkbox label="CPE" value="CPE" />
        <el-checkbox label="VCPE" value="VCPE" />
        <el-checkbox label="客户端" value="客户端" />
      </el-checkbox-group>
    </el-form-item>
    <div v-if="accessType.includes('CPE')">
      <!--  节点 -->
      <div my1 flex-between-center>
        <h3 text-md font-bold>
          CPE节点
        </h3>
        <el-button type="primary" @click="addNode('cpe')">
          +
        </el-button>
      </div>
      <BaseTable
        :data="cpeNodeList" style="width: 100%;min-width:800px"
      >
        <el-table-column prop="name" label="节点名称">
          <template #default="{ row }">
            <el-input />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="地址">
          <template #default="{ row }">
            <el-input />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="节点类型">
          <template #default="{ row }">
            <el-radio v-for="item in ['HUB', 'CPE']" :key="item" :label="item">
              {{ item }}
            </el-radio>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="带宽">
          <template #default="{ row }">
            <el-input class="!w-25" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="节点业务模板">
          <template #default="{ row }">
            <div flex-y-center gap1>
              <el-select v-model="template" placeholder="" class="!w-30">
                <el-option label="自定义" value="自定义" @click="templateVisible = true" />
                <el-option label="CPE-HA-主专备专-主专备专-主备" value=" " />
                <el-option label="CPE-HA-主专备专-主专备专-负载" value="" />
              </el-select>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="备注">
          <template #default="{ row }">
            <el-input
              type="textarea" placeholder="互联IP、AS号
LAN网段、WAN IP
            "
            />
          </template>
        </el-table-column>
      </BaseTable>
    </div>
    <div v-if="accessType.includes('VCPE')">
      <el-divider direction="horizontal">
        VCPE节点
      </el-divider>
      <div w-full flex gap3>
        <BaseTable
          :data="vcpeNodeList" style="width: 100%;min-width:800px"
        >
          <el-table-column prop="name" label="节点名称">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="dispalyName" label="带宽">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="phohne" label="HA" width="50">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="phohne" label="流量分析" width="150">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="使用人数">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column label="虚机提供方">
            <template #default="{ row }">
              <el-select placeholder="">
                <el-option label="我方" value="我方" />
                <el-option label="阿里" value="阿里" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="对接方式" width="200">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio-button label="单臂" />
                <el-radio-button label="网关" />
                <el-radio-button label="串接" />
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="操作" width="200">
            <!-- 自定义表头 -->
            <template #header>
              <el-button type="primary" @click="addNode('vcpe')">
                +
              </el-button>
            </template>
            <template #default="{ row, $index }">
              <el-button type="danger" @click="delNode($index, 'vcpe')">
                -
              </el-button>
            </template>
          </el-table-column>
        </BaseTable>
      </div>
    </div>
    <div v-if="accessType.includes('客户端')">
      <el-divider direction="horizontal">
        客户端
      </el-divider>
      <div w-full flex>
        <BaseTable
          :data="clientNodeList" style="width: 100%;min-width:800px"
        >
          <el-table-column prop="name" label="客户端数量">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="dispalyName" label="客户端人员区域描述" width="300">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="phohne" label="LADP">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column label="客户端类型">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="email" label="操作" width="200">
            <!-- 自定义表头 -->
            <template #header>
              <el-button type="primary" @click="addNode('client')">
                +
              </el-button>
            </template>
            <template #default="{ row, $index }">
              <el-button type="danger" @click="delNode($index, 'client')">
                -
              </el-button>
            </template>
          </el-table-column>
        </BaseTable>
      </div>
    </div>
  </div>
  <div my5 />
  <div class="form-block !border-purple" data-title="个性化" grid grid-cols-2 items-center>
    <el-form-item label="主备切换时间">
      <el-input />
    </el-form-item>
    <el-form-item label="延时要求描述">
      <el-input type="textarea" />
    </el-form-item>
    <el-form-item label="丢包要求">
      <el-input type="textarea" />
    </el-form-item>
    <el-form-item label="监控告警要求">
      <el-input type="textarea" />
    </el-form-item>
    <el-form-item label="其他要求">
      <el-input type="textarea" />
    </el-form-item>
    <NodeTemplate v-model="templateVisible" />
  </div>
</template>

<style scoped lang='scss'>
.cell-item {
  white-space: nowrap;
}
</style>
